<!--
 * @Author: wang
 * @Date: 2020-09-22 17:33:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: your name
 * @Description: 应急资源专家组
-->
<template>
  <div :class="themeClass">
    <div class="tabOne">
      <div class="btnBar">
        <div class="btnBarLeft">
          <div class="btnItem">
            <span>职称</span>
            <select class="search_select" v-model="dataObj.dutiesId">
              <option :value="item.id" v-for="item in dutiesList" :key="item.id">{{ item.dutiesName }}</option>
            </select>
          </div>
          <div class="btnItem">
            <span>从事行业及特长</span>
            <select class="search_select" v-model="dataObj.industryId">
              <option :value="item.id" v-for="item in industryList" :key="item.id">{{ item.industryName }}</option>
            </select>
          </div>
          <div class="btnItem">
            <span>姓名</span>
            <input class="search_input" placeholder="请输入姓名" v-model.trim="dataObj.name" />
          </div>
          <div class="serchBtn" @click="serch">搜索</div>
        </div>
        <div class="btnBarRight" @click="close">
          <!-- <img src="../../assets/images/notice_closeW.png" alt srcset /> -->
        </div>
      </div>
      <div class="tableBox">
        <i-table :row-class-name="rowClassName" border :columns="columns1" :data="tableData"></i-table>
        <div class="table-foot">
          <Page :total="total" class="currtPage" :current.sync="dataObj.page" @on-change="changePage"></Page>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getExpertGroupList, getDutiesList, getIndustryList } from '@/api/index.js'
export default {
  data () {
    return {
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: '100px'
        },
        {
          title: '姓名',
          key: 'name',
          width: '200px'
        },
        {
          title: '工作单位',
          key: 'company'
        },
        {
          title: '职称',
          key: 'dutiesName'
        },
        {
          title: '从事行业及特长',
          key: 'industryName'
        },
        {
          title: '联系电话',
          key: 'phone'
        }
      ],
      dutiesList: [],
      industryList: [],
      tableData: [
        { name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居' },
        { name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗' },
        { name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道' },
        { name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道' }
      ],
      total: 0,
      dataObj: {
        page: 1,
        size: 10,
        dutiesId: null, // 职称ID
        industryId: null, // 行业ID
        name: '' // 姓名
      }
    }
  },
  created () {
    this.getList()
    this.getDuties()
    this.getIndustry()
  },
  computed: {
    themeClass () {
      return `theme-${this.$store.getters.getTheme}`
    }
  },
  methods: {
    rowClassName (row, index) {
      // console.log(row, index)
      if (index % 2 === 0) {
        // 偶数条
        return 'thTwo'
      } else return 'thOne'
    },
    /*
    @description 用于获取专家组列表
    @param {Integer} dutiesId
    @param {Integer} industryId
    @param {String} name
    @return {Object} 返回集合
    */
    getList () {
      getExpertGroupList(this.dataObj).then((res) => {
        if (res.code === 200) {
          const { groupList, pageInfo } = res.result
          this.tableData = groupList
          this.total = pageInfo.total
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /*     @description 职称列表 */
    getDuties () {
      getDutiesList().then((res) => {
        if (res.code === 200) {
          const data = res.result
          const dutiesList = [
            {
              id: null,
              dutiesName: '全部'
            }
          ]
          data.forEach((e) => {
            dutiesList.push(e)
          })
          this.dutiesList = dutiesList
        }
      })
    },
    /*     @description 行业及特长列表 */
    getIndustry () {
      getIndustryList().then((res) => {
        if (res.code === 200) {
          const data = res.result
          const industryList = [
            {
              id: null,
              industryName: '全部'
            }
          ]
          data.forEach((e) => {
            industryList.push(e)
          })
          this.industryList = industryList
        }
      })
    },
    /* @description 搜索 */
    serch () {
      this.dataObj.page = 1
      this.getList()
    },
    /* @description 分页 */
    changePage (page) {
      this.dataObj.page = page
      this.getList()
    },
    /* @description 关闭弹框 */
    close () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.tabOne {
  width: 100vw;
  // height: 40.375rem /* 886/16 */;
  margin-top: 7.83rem;
  padding: 1.75rem /* 28/16 */;
  box-sizing: border-box;
  @include themify($themes) {
    // border-top: 0.125rem /* 2/16 */ solid themed('yjzy_bk_wborderTop');
    background: themed('yjzy_bg_color');
    background-image: themed('yjzy_bg');
    // color:themed('yjzy_font_color');
  }
  background-position: -22px -16px;
  // border-top: 0.125rem /* 2/16 */ solid var(--wborderTop);
  // background: var(--Wbg-f);
}
.btnBar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.875rem /* 30/16 */;
  .btnBarRight {
    width: 2rem /* 32/16 */;
    height: 2rem /* 32/16 */;
    @include themify($themes) {
      background-image: themed('yjzy_bg_btn');
      background-position: 1px 1px;
      box-shadow: 1px 8px 12px 0px themed('yjzy_bk_serchBtn_box_shadow');
    }
    cursor: pointer;
    // > img {
    //   width: 100%;
    //   height: 100%;
    // }
  }
  .btnBarLeft {
    display: flex;
    .btnItem {
      font-size: 1rem /* 20/16 */;
      @include themify($themes) {
        color: themed('yjzy_font_color');
      }
      margin-right: 3.0625rem /* 49/16 */;
      display: flex;
      align-items: center;
      > span {
        margin-right: 1.25rem /* 20/16 */;
      }
      .search_select {
        width: 6.25rem /* 100/16 */;
        height: 1.875rem /* 30/16 */;
        // background: rgba(70, 159, 255, 0.1);
        // border: 1px solid #72e6ff;
        // box-shadow: 1px 4px 6px 0px #0c1422;
        text-indent: 4px;
        outline: none;
        font-size: 12px;
        font-weight: 600;
        @include themify($themes) {
          color: themed('yjzy_color_search');
          background-image:themed('select_bj');
          background-position: -4px -1px;
          background-size: 108px 40px;
          background-repeat: no-repeat;
          background-color: themed('yjzy_bg_search');
          // border: 1px solid themed('yjzy_color_search');
          border:none;
          outline:none;
          appearance:none;
        }
        // color: #72e6ff;
        margin-right: 0.625rem /* 10/16 */;
        >option{
            color: black;
        }
      }
      .search_input {
        width: 7.5rem /* 120/16 */;
        height: 1.875rem /* 30/16 */;
        @include themify($themes) {
          color: themed('yjzy_color_input');
          background: themed('yjzy_bg_search_input');
          border: 1px solid themed('yjzy_bk_wlineOne');
        }
        outline: none;
        padding: 0.625rem /* 10/16 */;
        box-sizing: border-box;
        // border: 1px solid var(--wlineOne);
        // background: rgba(70, 159, 255, 0.1);
      }
    }
    .serchBtn {
      @include themify($themes) {
        background: themed('yjzy_bg_serchBtn');
        background-image: themed('yjzy_serchBtn');
        background-position: -11px -3px;
        color: themed('yjzy_Wfont_blur');
        // background-size:cover;
      }
      width: 6.25rem /* 100/16 */;
      height: 2.25rem /* 36/16 */;
      line-height: 2.25rem;
      text-align: center;
      font-size: 1rem;
      cursor: pointer;
    }
    .serchBtn:hover{
        @include themify($themes) {
            box-shadow: 1px 8px 12px 0px themed('yjzy_bk_serchBtn_box_shadow');
        }
    }
  }
}
::v-deep input::-webkit-input-placeholder {
  @include themify($themes) {
    color: themed('yjzy_td_color');
  }
}
::v-deep input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  @include themify($themes) {
    color: themed('yjzy_td_color');
  }
}
::v-deep input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  @include themify($themes) {
    color: themed('yjzy_td_color');
  }
}
::v-deep input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  @include themify($themes) {
    color: themed('yjzy_td_color');
  }
}

::v-deep .tableBox {
  // height: 42.9375rem /* 687/16 */;
  height: 657px;
  width: 100%;
  .ivu-table td {
    @include themify($themes) {
      background-color: themed('yjzy_td_bg');
    }
    span {
      @include themify($themes) {
        color: themed('yjzy_td_color');
      }
    }
    text-align:center;
  }
  thead > tr > th {
    @include themify($themes) {
      color: #fff !important;
      // color: themed('yjzy_color_table');
      background: themed('yjzy_bg_Wbg_tab');
    }
    // color: var(--Wfont-w);
    font-size: 1.2rem /* 20/16 */;
    text-align: center;
    // background: var(--Wbg-tab);
  }
  .thOne {
    font-size: 1rem /* 18/16 */;
    @include themify($themes) {
      color: themed('yjzy_font_table_color');
    }
    // color: var(--Wfont-w);
    > td {
      @include themify($themes) {
        background: themed('yjzy_Wbg_tabThOne');
      }
      // background: var(--Wbg-tabThOne);
    }
  }
  .thTwo {
    font-size: 1rem /* 18/16 */;
    @include themify($themes) {
      color: themed('yjzy_font_table_color');
    }
    > td {
      @include themify($themes) {
        background: themed('yjzy_bg_Wbg_tabThTwo');
      }
      // background: var(--Wbg-tabThTwo);
    }
  }
  .table-foot {
    margin-top: 2.3125rem /* 37/16 */;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .currtPage {
      .ivu-page-item {
        border: none;
        @include themify($themes) {
          color: themed('yjzy_color_item');
        }
        // color: var(--Wfont-w);
        font-size: 1rem /* 20/16 */;
        font-weight: 600;
        background: none;
        border-radius: 0;
        height:36px;
        line-height:36px;
        min-width: 36px;
      }
      .ivu-page-item-active {
        @include themify($themes) {
          color: themed('yjzy_Wfont_blur');
          border: 1px solid themed('yjzy_Wfont_blur');
          background: themed('yjzy_bg_Wbg_tab');
        }
        border: none;
        // background: var(--Wbg-tab);
        // color: var(--Wfont-blur);
        // border: 1px solid var(--Wfont-blur);
      }
      .ivu-page-item-active a{
          @include themify($themes) {
            color: themed('yjzy_page_item_active_color')!important;
          }
      }
      .ivu-page-next,
      .ivu-page-prev {
        @include themify($themes) {
          color: themed('font-color');
          background: themed('yjzy_bg_wlineTwo');
        }
        border: none;
        border-radius:0;
        height:36px;
        line-height:36px;
        min-width: 36px;
        // color: var(--Wfont-w);
        // background: var(--wlineTwo);
      }
      .ivu-page-item a {
        @include themify($themes) {
          color: themed('yjzy_page_color');
        }
        // color: var(--Wfont-w);
      }
      .ivu-page-next a,
      .ivu-page-prev a {
        font-size:17px;
        @include themify($themes) {
          color: themed('yjzy_prev_color');
        }
        // color: var(--Wfont-w);
      }
    }
  }
  .ivu-table-border td, .ivu-table-border th{
    @include themify($themes) {
      border-color: themed('yjzy_border_color_3');
      // border-color: rgba(255, 255, 255, 0.3);
    }
  }
  .ivu-table td, .ivu-table th{
    @include themify($themes) {
      border-color: themed('yjzy_border_color_3');
      // border-color: rgba(255, 255, 255, 0.3);
    }
  }
  .ivu-table-wrapper{
    @include themify($themes) {
      border-color: themed('yjzy_border_color_5');
      // border-color: rgba(255, 255, 255, 0.5);
    }
  }
  .ivu-table:before{
    z-index: -1;
  }
  tr:nth-last-child(1) td{
    @include themify($themes) {
      border-bottom: 1px solid themed('yjzy_border_color_5');
    }
  }
  td:nth-last-of-type(1){
    @include themify($themes) {
      border-right: 1px solid themed('yjzy_border_color_5');
    }
  }
  th:nth-last-of-type(1){
    @include themify($themes) {
      color: themed('yjzy_border_color_5');
      border-right: 1px solid themed('yjzy_border_color_5');
    }
  }
}
</style>
